<template>
	<Layout class="ty-layout"> 
		<Header class="ty-layout-header-bar">
			<Row>
				<i-col :xs="4" :sm="4" :md="4" :lg="4" class="ty-layout-header-bar-icon">
					<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{color:'#fefefe',marginBottom:'5px',zIndex:10}" type="md-menu" size="30"></Icon>					
				</i-col>
				<i-col :xs="16" :sm="16" :md="16" :lg="16" class="ty-layout-header-bar-logo">
					<img src="../assets/logo1.png">
					<img src="../assets/logo.png" style="height: 70px;">
					<img src="../assets/logo2.png">
				</i-col>
				<i-col :xs="4" :sm="4" :md="4" :lg="4">
					<Row>
						<i-col :xs="0" :sm="0" :md="0" :lg="6">
							<Icon type="ios-home-outline" color="#fefefe" size="30" :style="{marginTop:'50px'}" @click="turnToPage('HomeView')"/>
						</i-col>
						<i-col :xs="0" :sm="0" :md="0" :lg="6">
							<!-- <Badge :count="badgeCount" :offset="[50,3]">
								<Icon type="ios-notifications-outline" color="#fefefe" size="30" :style="{marginTop:'50px'}" @click="handleMessage"/>
							</Badge> -->
							<Icon type="ios-notifications-outline" color="#fefefe" size="30" :style="{marginTop:'50px'}"/>
						</i-col>
						<i-col :xs="0" :sm="0" :md="0" :lg="6"><FullScreen v-model="isFullscreen" style="margin-top: 35px;"/></i-col>
						<i-col :xs="24" :sm="24" :md="24" :lg="6">
							<Dropdown @on-click="handleClick">
								<Avatar :src="avatar" shape="circle" :style="{marginTop:'35px',color:'#fff'}" size="large"/>
							<template #list>
								<DropdownMenu>
									<DropdownItem name="Personal">个人信息</DropdownItem>
									<DropdownItem name="Password">修改密码</DropdownItem>
									<DropdownItem divided name="logout">退出登录</DropdownItem>
								</DropdownMenu>
							</template>
							</Dropdown>
						</i-col>
					</Row>
				</i-col>
			</Row>
		</Header> 
		<Layout>
			<Sider class="ty-main-slider" hide-trigger ref="side1" width="200" collapsible :collapsed-width="60" v-model="isCollapsed">
				<SideMenu :collapsed="isCollapsed" :active-name="$route.name"
				  @on-select="turnToPage" :menu-list="menuList" :openNames="openNavNames">
				</SideMenu>
			</Sider>
			<Layout>
				<Header class="ty-layout-header-breadcrumb">
					<Breadcrumb>
					    <BreadcrumbItem v-if="navInfo.id==='Personal'">
							<Icon type="ios-contact" size="20"></Icon> 个人信息
					    </BreadcrumbItem>
						<BreadcrumbItem v-else-if="navInfo.id==='Password'">
						    <Icon type="ios-lock" size="20"></Icon> 修改密码
						</BreadcrumbItem>
						<BreadcrumbItem v-else>
						    <Icon type="ios-home" size="20"></Icon> 首页
						</BreadcrumbItem>
					    <BreadcrumbItem v-if="navInfo.picon!=undefined">
					        <Icon :type="navInfo.picon" size="20"></Icon> {{navInfo.ptext}}
					    </BreadcrumbItem>
					    <BreadcrumbItem v-if="navInfo.icon!=undefined">
					        <Icon :type="navInfo.icon" size="20"></Icon> {{navInfo.text}}
					    </BreadcrumbItem>
					</Breadcrumb>
				</Header>
				<Content class="ty-main-content">
					<div style="background: #fff;height: 100%"><router-view/></div>
				</Content> 
			</Layout>
		</Layout> 
	</Layout>
</template>
<script>
import config from '@/config'
import FullScreen from '@/components/FullScreen'
import SideMenu from '@/components/SideMenu'
import {getTreeList} from '@/libs/tools.js'
export default {
	data () {
		return {
			isCollapsed: false,
			isFullscreen:false,
			badgeCount:3,
			avatar:'',
			menuList:[],
			navInfo:{},
			navList:[]
		}
	},
	components: {
	   FullScreen,SideMenu
	},
	computed: {
		rotateIcon () {
			return [
				'menu-icon',
				this.isCollapsed ? 'rotate-icon' : ''
			]
		},
		menuitemClasses () {
			return [
				'menu-item',
				this.isCollapsed ? 'collapsed-menu' : ''
			]
		},
		openNavNames(){
			let navFirst= this.navList.filter(n=>n.ptext==null)
			let names=[]
			navFirst.forEach((x)=>{
				names.push(x.id)
			})
			return names
		}
	},
	methods: {
		collapsedSider () {
			this.$refs.side1.toggleCollapse()
		},
		handleClick(name){
			if(name==='logout'){
				sessionStorage.clear()
				this.$router.push('/')
			}else if(name==='Personal'){
				this.turnToPage('Personal')
			}else if(name==='Password'){
				this.turnToPage('Password')
			}
		},
		handleMessage(){
			this.$Notice.info({
				title: '通知消息1',
				desc: '这里是测试通知消息1'
			})
			this.$Notice.success({
				title: '通知消息2',
				desc: '这里是测试通知消息2'
			})
			this.$Notice.warning({
				title: '通知消息3',
				desc: '这里是测试通知消息3'
			})
		},
		turnToPage(route) {
		  let isLink = name.indexOf('href_') !== -1
		  if (isLink) {
			window.open(name.split('_')[1])
			return
		  }
		  this.navInfo=this.navList.find(n=>n.id===route)
		  this.$router.push({ name: route })
		}
	},
	mounted () {
	},
	beforeCreate(){
		let uid=sessionStorage.getItem("uid")
		if(uid==null){
			this.$router.push('/')
			return
		}
		this.$axios.post("getUserInfo.action",{str1:uid}).then(res=>{
			let formatList=res.data.navList.map((item)=>{
				return {title:item.text,icon:item.icon,name:item.id,ptitle:item.ptext}
			})
			this.menuList=getTreeList(formatList,undefined,[])
			res.data.navList.push({id:"HomeView"},{id:"Password"},{id:"Personal"})
			this.navList=res.data.navList
			this.turnToPage(this.$route.name)
			this.$store.commit("setUserInfo",res.data.user)
			
			if(res.data.token==undefined){
				this.avatar=config.baseUrl+'doc/tangyin/images/avatar2.png'
			}else if(res.data.token.avatar==null){
				this.avatar=config.baseUrl+'doc/tangyin/images/avatar2.png'
			}else{
				this.avatar=config.baseUrl+res.data.token.avatar
			}
		 })
		
	}
}
</script>
<style scoped>
.ivu-col{
	height: 80px;
}
.side-hide span{
	display: none;
}
.menu-icon {
	transition: all .3s;
}
.rotate-icon {
	transform: rotate(-90deg);
}
</style>
